<template>
  <div class="reccommend">
    <div class='recommend-item' v-for="item in reccommend.slice(0,4)" :key="item.id">
      <a href="#" @click="goDetail(item.id)">
        <img :src="item.cover_url" alt="">
        <div>{{item.title}}</div>
      </a>
    </div>
  </div>
</template>
<script>
export default {
   props: {
     reccommend:Array,
     default(){
       return []
     }
   },
   methods:{
     goDetail(id){
       this.$router.push('/detail/'+id)
     }
   }
}
</script>
<style lang='less'>
    .reccommend {
        display: flex;
        width:100%;
        text-align: center;
        padding: 15px 0 30px;
        border-bottom:8px solid #EEE;
        font-size:12px;
    }
    .recommend-item {
        flex:1;
        img {
            width:70px;
            height:70px;
            margin-bottom: 10px;
        }
    }
</style>
